
<include file="Public:iframe_head" />

	<main class="main-center">
		
    <div style="clear: both;overflow: hidden;">
      

   
		<div class="center-left">
			
		<ul class="left-list">
		<a href="#"><li class="icon-current">频道</li></a>	
		<a href="#"><li>歌曲</li></a>
		</ul>
		</div>

		<div class="center-right">
			<ul  class="channel-content">		
				<li  v-for=" i in channel_list">

          <div style="width: 100%;height: 100%">
            
             <a target="" v-bind:href="channelUrl(i.id)"><img alt="channel" v-bind:src="i.pic"></a>
          <div class="channel-bomtom">
            <h4>{{i.name}}</h4>
            <span class="chn-left-music">{{(i.sound_count/10000.0).toFixed(2)}}万</span>
            <span class="chn-left-person">{{(i.follow_count/10000.0).toFixed(2)}}万</span>
            <span class="chn-left-share">{{(i.share_count/10000.0).toFixed(2)}}万</span>
          </div>
          </div>

         
          <!--这是一段注释。注释不会在浏览器中显示。

           -->          
				</li>
			</ul>


		<ul class="pagination page-controll">
    		<li  v-for=" (item, index) in page_list">
    			
          <a v-on:click="pageAction" v-bind:class="item.isSelect" href="javascript:(void);">{{item.page}}</a>

    		</li>
		</ul>

		</div>

     </div>

<div style="height: 100px;"></div>

	</main>

</main>
 



<script type="text/javascript">
		
    var Mpage_list = basePagListAction();
    var vue = new Vue({
  	el: '#app',
  	data:{
  		channel_list:[],
  		currect_page:1,
  		page_list:Mpage_list
  	},
  	created:function() {
  		this.fetchData();
  	},
  	methods:{
  		pageAction:function(e) {
  			var info = e.target.innerHTML;
        var t_currect_page = this.currect_page;
        var t_page_list = this.page_list;
        var t_channel_length = this.channel_list.length;
        var pageRs = pageChangeAction(info,t_currect_page,t_page_list,t_channel_length,9);

        if (pageRs == undefined) {return};
        this.page_list = pageRs.page_list;
        this.currect_page = pageRs.currect_page;

        var stateObject = {};
        var title = "";
        var newUrl = window.location.pathname+"?page="+this.currect_page;
        history.pushState(stateObject,title,newUrl);



  			this.fetchData();
  		},
  		fetchData:function() {
  			var t = this;
  			$.get("{:U('Api/getChannelInfo')}",{"page":t.currect_page},function(data) {
  				var channelInfo = data;
  				//console.log(data);
  				if (channelInfo["rt"] == 1){
  					t.channel_list = channelInfo["data"];

  				}
  			});
  		},
      channelUrl:function(info) {
          return "__URL__/channelPage/c_id/"+info;
      }
  	},


})


     function changeURLArg(url,arg,arg_val){
       var pattern=arg+'=([^&]*)';
       var replaceText=arg+'='+arg_val; 
       if(url.match(pattern)){
            var tmp='/('+ arg+'=)([^&]*)/gi';
           tmp=url.replace(eval(tmp),replaceText);
           return tmp;
       }else{ 
         if(url.match('[\?]')){ 
             return url+'&'+replaceText; 
         }else{ 
             return url+'?'+replaceText; 
        } 
     }
 }

</script>

<script src="__PUBLIC__/js/main.js" type="text/javascript"></script>

</body>
</html>